<template>
  <div>
      <!-- 加载屏幕-->
      <el-skeleton v-if="data.skeletonShow" :rows="35" animated />
      <!-- 用户数据列表-->
      <div v-else style="margin-left: 10px">
          <el-table :data="data.tableData" empty-text="暂无数据" stripe style="width: 100%" tabindex="index"  >
              <el-table-column fixed label="ID" prop="id" width="50"  />
              <el-table-column label="订单编号" prop="productid" width="150" />
              <el-table-column label="订单名称" prop="productname" width="200" />
              <el-table-column label="下单用户" prop="userInfo.username" width="120" />
              <el-table-column label="用户电话" property="userInfo.telephon" width="150" />
              <el-table-column label="商品价格" property="productprice" width="100" />
              <el-table-column label="支付状态" prop="paystate" width="120" />
              <el-table-column label="下单时间" prop="createtime" width="200" />
              <el-table-column label="支付时间" prop="paytime" width="200" />
              <el-table-column label="商家名称" prop="merchantname" width="200" />
              <el-table-column label="商家电话号码" prop="merchantphone" width="150" />
              <el-table-column label="订单详细信息" prop="productname" width="350" />
              <el-table-column fixed="right" label="操作" width="140">
                  <template  #default="scope">
                      <div class="btn-right-table">
                          <el-button  size="small" type="danger" @click="deleteOder(scope.row)">删除</el-button>
                          <el-button  selection-change="" size="small" type="success" @click="escOrder(scope.row)">退款</el-button>
                      </div>
                  </template>
              </el-table-column>
          </el-table>

          <!--    分页-->
          <div style="width: 100%; display: flex;justify-content: flex-end;margin-top: 5px;margin-bottom: 5px">
              <el-pagination :total="data.count"  @current-change="currentChangeFun"  background layout="prev, pager, next" />
          </div>
      </div>
  </div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue";
 import {navSiderStore} from "../store/navSider";
 import {selAdminOders,delPayOdersDao} from "../request/request";
 import moment from "moment/moment";
import {ElMessageBox, ElNotification} from "element-plus";

 let data=ref({
     skeletonShow:true,//骨架屏
     count:0,//分页数量
     tableData:[],//data数据
     page:1,//当前页
 })

 onMounted(()=>{
     selAdminOdersFun();
 })

 /**
  * @param{{查询所有的订单}}
  * @description {{分页查询}}
  * @description {{模糊查询}}
  * @description {{日期筛选查询}}
  */
 function selAdminOdersFun(){
     let DateTime=navSiderStore().dataTimeValue;
     selAdminOders({
         limit:10,//限制条数
         page:data.value.page,//查询页数
         paystate:null,//支付状态
         islike:navSiderStore().inputSearchValue==null? null:navSiderStore().inputSearchValue,//模糊查询
         dataTime: {
              start:DateTime[0]==null? false:moment(DateTime[0]).format('yyyy-MM-DD HH:mm:ss'),
              end:DateTime[1]==null?  false:moment(DateTime[1]).format('yyyy-MM-DD HH:mm:ss'),
        }
     }).then((res)=>{
         data.value.skeletonShow=false;
         navSiderStore().setDataTimeValue([null,null]);
         navSiderStore().setInputSearchValue(null);
         if (res.code==200){
             data.value.count=res.data.count;
             data.value.tableData=res.data.list
         }
     })
 }
/**
 * @param{{删除订单}}
 * @description {{删除事件}}
 */
 function deleteOder(e){
    ElMessageBox.confirm(
        '是否确认删除该订单?',
        '温馨提示',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }).then(() => {
            delPayOdersDao({id:e.id}).then((res)=>{
                if (res.code==200){
                    data.value.tableData=data.value.tableData.filter(item=>{
                        return item!=e
                    })
                    ElNotification({title: 'Success', message: '删除成功', type: 'success'})
                }else {
                    ElNotification({title: 'Error', message: '删除失败', type: 'error'})
                }
            })
        })

 }
/**
 * @param{{退款}}
 */
 function escOrder(e){
    ElNotification({title: 'warning', message: '该功能暂未开放！', type: 'warning'})
 }
/**
 * @param{{分页}}
 * @description {{分页点击事件}}
 */
 function currentChangeFun(e){
     data.value.page=e
     selAdminOdersFun();
 }

</script>

<style scoped>
.btn-right-table{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.form-image-hand{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;

}
.username-img{
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 26px;
}
.username-img span{
    margin-left: 20px;
}
.input-telephon-qqmailbox{
    display: flex;
    width: 100%;
}
.input-telephon-qqmailbox :nth-child(2){
    margin-left: 20px;
}
</style>